{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传中心-{$seo.title}</title>
    <include file="Index:meta" />
    <style>
        .upload-container {
            padding-top: 20px;
            height: 100%;
            background: #fff;
        }

        .upload-con {
            margin-right: 0 auto;
            margin-top: 20px;
        }

        #picker {
            position: relative;
        }

        .upload-con input[type='file'] {
            opacity: 0;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        /* cell */

        .upload-con li {
            border-color: #ccc;
            border-width: 1px;
            border-style: solid;
            padding: 25px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .upload-con li.up-up {
            border-style: dashed;
        }

        /* 上传状态 */

        .upload-con li.upload-state {
            border: 0 none;
        }

        .upload-min>* {
            display: inline-block;
            vertical-align: middle;
        }

        .upload-con p {
            font-size: 16px;
            margin-bottom: 15px;
        }

        .upload-con .btn {
            font-size: 16px;
            margin-right: 10px;
        }

        .upload-con .btn-info {
            background: #2a99ea;
        }

        .upload-con .btn-info:hover,
        .upload-con .btn-info:active {
            background: #2a99ea;
        }

        /* 进度条 */

        .upload-con .progress {
            height: 10px;
        }

        le>
        /* modal  remote时显示 */

        #triggerModal .container {
            position: relative;
        }

        .box-close {
            display: none;
        }

        #triggerModal .container .box-close {
            display: block;
            position: absolute;
            right: 10px;
            top: 0;
            margin-top: -5px;
            cursor: pointer;
            z-index: 11;
            transition: all .3s;
            -webkit-transform: all .3s;
        }

        #triggerModal .container .box-close:hover {
            color: #f00;
        }
    </style>
</head>

<body>
    <div class="container upload-container row">
        <a data-dismiss="modal" class="box-close icon icon-times"></a>

        <h1 class="h1 text-center">上传</h1>
        <ul class="list-unstyled upload-con">
            <!-- 上传控件 -->
            <li class="up-up">
                <div class="upload-min ">
                    <button type="button" class="btn btn-info " id="picker">选择</button>
                    <span>
                        支持任意格式文件上传，单个文件不操作500M。
                    </span>
                </div>
            </li>
            <!-- 上传控件 end-->
            <!-- 上传文件列表 -->
            <ul class="list-unstyled" id="upload-list">
                <!-- <li>
                    <p>
                        <small class="pull-right up-state">
                            等待上传
                        </small>
                        
                        文件名称
                    </p>
                    <div class="upload-min ">
                        <button type="button" class="btn btn-danger">选择</button>
                        <span>
                            支持任意格式文件上传，单个文件不操作500M。
                        </span>
                    </div>
                </li> -->
            </ul>
            <li class="upload-state">
                <p class="text-center" id="upload-state">
                    等待上传...
                </p>
                <div class="progress">
                    <div id="upload-show" class="progress-bar progress-bar-success" role="progressbar" style="width: 0%"></div>
                </div>
                <div class="row">
                    <!-- <button type="button" id="sub" class="btn btn-info pull-right" disabled>保存数据</button> -->
                    <button type="button" id="upload" class="btn btn-success pull-right">开始上传</button>

                </div>
            </li>
        </ul>
    </div>
    <!-- <script src="__PUBLIC__/dist/js/webuploader.min.js"></script> -->
    <script>
        var uploader = WebUploader.create({

            // swf文件路径
            swf: "//cdn.bootcss.com/webuploader/0.1.1/Uploader.swf",

            // 文件接收服务端。
            server: "{:U('Home/Index/webupload')}&type={$type}&oid={$oid}",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });
        //列表dom
        var $list = $("#upload-list");
        var $percent = $("#upload-show");
        var $state = $("#upload-state");
        var serverData = {};


        //加入队列
        uploader.on('fileQueued', function (file) {
            // init state
            $state.removeClass("text-danger").removeClass("text-success").html("等待上传...")
            $percent.width("0%");
            //add cell dom
            $list.append("<li id='" + file.id + "'>"
                + "    <p>"
                + "      <small class='up-state pull-right'>"
                + "          等待上传"
                + "      </small>"
                + "      <span class='up-name'>"
                + file.name
                + "      </span>"
                + "    </p>"
                + "    <div class=\"upload-min \">"
                + "        <button type=\"button\" class=\"btn btn-danger\">删除</button>"
                + "      <span>删除后无法恢复，需要重新“选择”添加。</span>"
                + "    </div>"
                + "</li> ");

            $("#" + file.id).on("click", cellRemove);
        })

        //开始上传
        $("#upload").on("click", function () {
            uploader.upload();
        })

        //保存数据
        $("#sub").on("click", function () {

            //server code
            $list.empty();

        })

        //删除当前文件
        function cellRemove() {
            var $this = $(this);
            var title = $.trim($(this).find(".up-name").text());
            if (confirm("确定要删除" + title + "吗？")) {
                var id = $this.attr("id");
                //中断当期文件上传
                // uploader.cancelFile(id);
                //移除文件
                uploader.removeFile(id, true);
                //文件上传成功，删除data 
                if (serverData[id]) {
                    //server code callbreak
                    $.post("{:U('Home/Index/webdelfile')}&type={$type}&oid={$oid}", { id: serverData[id].id }, function (req) {
                        req = JSON.parse(req);

                        if (req.status == 1) {
                            delete serverData[id];
                            $this.remove();
                        } else {
                            alert(req.info);
                        }
                        // isSubServer();
                    })
                } else {
                    $this.remove();
                }
            }
        }

        //文件上传过程中 创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            $state.addClass("text-danger").html("文件上传中，请勿关闭窗口");
            $percent.css('width', percentage * 100 + '%');
        });



        //上传成功
        uploader.on('uploadSuccess', function (file, response) {
            // cell
            var info = response;
            if (info.status == 1) {
                $("#" + file.id).find(".up-state").addClass("text-success").html("上传成功!");
                serverData[file.id] = response;
                // isSubServer();
            } else {
                cellError(file, info)
            }

        });


        //tip 上传失败
        function cellError(file, info) {
            var tip = info ? info.info : "上传失败!";
            $("#" + file.id).find(".up-state").addClass("text-danger").html(tip);
        }

        // 上传失败
        uploader.on('uploadError', function (file) {
            // cell
            cellError(file)

        });

        //文件上传结束
        uploader.on('uploadComplete', function (file) {
            $state.removeClass("text-danger").addClass("text-success").html("所有文件上传结束");
        });

        // // 数据状态
        // var $sub = $("#sub");
        function isSubServer() {
            var n = 0;
            //json length
            for (var k in serverData) {
                n++;
                break;
            }

            // if (n) {
            //     //允许保存数据
            //     $sub.attr("disabled", false);
            // } else {
            //     $sub.attr("disabled", true);
            // }
            return n;
        }
        //刷新资源模块
        $("#triggerModal").on("hide.zui.modal", function () {
            if (isSubServer()) {
                $('#extend').empty();
                $('[data-container="#extend"]').trigger("click");
            }
        })
    </script>
</body>

</html>